<template>
  <div class="home">
    <div class="header">
      <div class="left">
        <div class="img">
          <img
            src="https://www.suoyiren.com/uc_server/images/noavatar_middle.gif?ts=1640112318"
            alt=""
          />
        </div>
        <!-- <div class="img" v-if="!going">
          <img src="../assets/img/thumbbig-111674.webp" alt="">
        </div> -->
      </div>
      <div class="mid">
        <p>锁艺人-锁匠开锁技术交流论坛</p>
      </div>
      <div class="right">
        <router-link tag="div" to="/search" class="img">
          <img src="../assets/img/fdj.png" alt="" />
        </router-link>
      </div>
    </div>

    <div class="nav">
      <ul>
        <router-link tag="li" to="/home">
          <a class="con">热点</a>
        </router-link>
        <router-link tag="li" to="/news">
          <a>锁业快讯</a>
        </router-link>
        <router-link tag="li" to="/news">
          <a>锁艺人物</a>
        </router-link>
        <router-link tag="li" to="/news">
          <a>民用锁艺</a>
        </router-link>
        <router-link tag="li" to="/news">
          <a>防盗专栏</a>
        </router-link>
      </ul>
    </div>

    <van-swipe class="my-swipe" @change="onChange" :autoplay="3000">
      <van-swipe-item v-for="(item, index) in chartlist" :key="index">
        <img :src="item.img" alt="" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/{{ sum }}</div>
      </template>
    </van-swipe>

    <!-- <div class="bg">
            <img src="https://www.suoyiren.com/data/attachment/block/e6/e6c74a5c45033ba02bb7622d3ee31478.jpg" alt="">
        </div> -->

    <div class="classify">
      <div
        class="item"
        v-for="(item, index) in classifyData"
        :key="index"
        @click="sign(item.id)"
      >
        <div class="img">
          <img :src="item.img" alt="" />
        </div>
        <div class="content">
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>

    <div class="user">
      <div class="item">
        <div class="img">
          <img
            src="https://www.suoyiren.com/source/plugin/comiis_app_portal/image/001.png"
            alt=""
          />
        </div>
        <div class="word">
          <p>社区新帖</p>
          <span>汇聚每日最新贴</span>
        </div>
      </div>
      <div class="item">
        <div class="img">
          <img
            src="https://www.suoyiren.com/source/plugin/comiis_app_portal/image/003.png"
            alt=""
          />
        </div>
        <div class="word">
          <p>新闻资讯</p>
          <span>头条早知道</span>
        </div>
      </div>
    </div>

    <div class="main">
      <router-link
        tag="div"
        :to="'/details?id=' + item.id"
        class="items"
        v-for="(item, index) in mainList"
        :key="index"
      >
        <div class="img">
          <img :src="item.img" alt="" />
        </div>
        <div class="content">
          <p>{{ item.title }}</p>
          <span>原创 | {{ item.times }}</span>
          <i>{{ item.num }}阅读</i>
        </div>
      </router-link>
    </div>

    <div class="duo"></div>

    <div class="footer">
      <ul>
        <router-link tag="li" to="/home">
          <a>
            <div class="img">
              <img src="../assets/img/shouye1.png" alt="" />
            </div>
            <div class="word">
              <p class="con">首页</p>
            </div>
          </a>
        </router-link>
        <router-link tag="li" to="/talk">
          <a>
            <div class="img">
              <img src="../assets/img/taolun.png" alt="" />
            </div>
            <div class="word">
              <p>交流</p>
            </div>
          </a>
        </router-link>
        <router-link tag="li" to="/release">
          <a>
            <div class="img">
              <img src="../assets/img/fabulow.png" alt="" />
            </div>
            <div class="word">
              <p>发布</p>
            </div>
          </a>
        </router-link>
        <router-link tag="li" to="/find">
          <a>
            <div class="img">
              <img src="../assets/img/quan.png" alt="" />
            </div>
            <div class="word">
              <p>发现</p>
            </div>
          </a>
        </router-link>
        <router-link tag="li" to="/my">
          <a>
            <div class="img">
              <img src="../assets/img/wo.png" alt="" />
            </div>
            <div class="word">
              <p>我的</p>
            </div>
          </a>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import { getclassifydata, getmainList, getchartlist } from "../api/home";
export default {
  props: ["CoList", "going"],
  data() {
    return {
      signz: true,
      sum: null,
      current: 0,
      classifyData: null,
      mainList: null,
      chartlist: null,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    //签到
    sign(id) {
      if(window.localStorage.token){
        if (id == 2) {
        var logim = window.localStorage.sign;
        if (logim) {
          this.signz = false;
        }
        if (this.signz) {
          this.$toast("签到成功");
          window.localStorage.setItem("sign", "已签到");
        } else {
          this.$toast("已签到");
        }
        this.signz = false;
      } 
      }else{
        this.$router.push('/login');
      }
    },
  },
  created() {
    getclassifydata().then((data) => {
      this.classifyData = data.classifyData;
      // console.log(this.classifyData);
    }),
      getmainList().then((data) => {
        this.mainList = data.mainList;
        // console.log(this.mainList);
      }),
      getchartlist().then((data) => {
        this.chartlist = data.chartlist;
        this.sum = this.chartlist.length;
        // console.log(this.chartlist);
      });
  },
};
</script>

<style lang="scss" scoped>
.home {
  .header {
    width: 100%;
    height: 48px;
    background: #53bcf5;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    .left {
      width: 15.4%;
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      padding-left: 10px;
      padding-right: 60px;
      .img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .mid {
      flex: 1;
      display: flex;
      align-items: center;
      p {
        font-size: 18px;
        color: #fff;
        width: 65%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .right {
      .img {
        width: 25px;
        height: 25px;
        margin-right: 10px;
        img {
          width: 100%;
        }
      }
    }
  }
  .nav {
    margin-top: 48px;
    height: 40px;
    border-bottom: 6px solid #f1f1f1;
    ul {
      display: flex;
      height: 40px;
      background: #fff;
      position: fixed;
      top: 48px;
      left: 0px;
      width: 100%;
      li {
        flex: 1;
        line-height: 40px;
        display: flex;
        justify-content: center;
        a {
          text-align: center;
          font-size: 16px;
          color: #676767;
          &.con {
            display: block;
            color: #0a9bf5;
          }
        }
      }
    }
  }
  .bg {
    width: 100%;
    img {
      width: 100%;
    }
    & > div {
      display: flex;
      height: 4px;
    }
    span {
      position: relative;
      bottom: 16px;
      left: 45%;
      display: block;
      width: 4px;
      height: 4px;
      margin: 0 6px;
      background: #fff;
      border-radius: 50%;
      &.con {
        background: #000;
      }
    }
  }
  .classify {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 6px solid #f1f1f1;
    border-top: 6px solid #f1f1f1;
    padding: 6px 0;
    .item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .img {
        width: 30px;
        height: 30px;
        img {
          width: 100%;
        }
      }
      .content {
        p {
          color: #aeaeae;
          font-size: 12px;
          padding: 8px 0;
        }
      }
    }
  }
  .user {
    display: flex;
    justify-content: space-around;
    border-bottom: 6px solid #f1f1f1;
    height: 70px;
    .item {
      display: flex;
      align-items: center;
      border-right: 2px solid #999;
      flex: 1;
      &:last-child {
        border: none;
      }
      .img {
        width: 40px;
        height: 40px;
        margin-left: 15px;
        img {
          width: 100%;
        }
      }
      .word {
        margin: 0 10px;
        p {
          color: #20b4ff;
          font-size: 20px;
        }
        span {
          font-size: 12px;
          color: #b8b8b8;
        }
      }
    }
  }
  .main {
    display: flex;
    flex-direction: column;
    .items {
      width: 96.5%;
      margin: 0 auto;
      display: flex;
      margin: 12px;
      padding-bottom: 12px;
      border-bottom: 2px solid #f1f1f1;
      .img {
        width: 105px;
        height: 85px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-left: 15px;
        p {
          font-size: 17px;
          font-weight: 400;
          margin-bottom: 26px;
        }
        span {
          color: #bbb;
          font-size: 12px;
        }
        i {
          color: #bbb;
          font-size: 12px;
          font-style: normal;
        }
      }
    }
  }
  .duo {
    height: 44px;
  }
  .footer {
    background: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    ul {
      display: flex;
      li {
        flex: 1;
        a {
          display: flex;
          flex-direction: column;
          align-items: center;
          .img {
            width: 24px;
            height: 24px;
            img {
              width: 100%;
            }
          }
          .word {
            p {
              color: #999;
              font-size: 12px;
              &.con {
                color: #45dfe7;
              }
            }
          }
        }
      }
    }
  }

  .my-swipe {
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      text-align: center;
      background-color: #39a9ed;
      height: 187px;
      img {
        width: 100%;
      }
    }
  }

  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
  }
}
</style>
